<template>
	<view class="detail-page">
		<view class="top">
			<view class="navigation">
				<view class="back" @click="back"></view>
				<view class="tool">
					<!-- <view class="collection"></view> -->
					<view class="share"></view>
				</view>
			</view>
			<view class="image" :style="{ backgroundImage: 'url(' + detailMsg.jewerly.image + ')' }">
			</view>
		</view>
		<view class="msg-two" style="height: 50vw;">
			<view>订单详情</view>
			<view style="font-size: 3vw;color:#f0842a;margin-top: 2vw;">
				订单名称:&nbsp;{{detailMsg.order_as_name==null?detailMsg.order_name:detailMsg.order_as_name}}</view>
			<view v-if="detailMsg.is_send==3" style="font-size: 3vw;color:green;">
				支付时间:&nbsp;{{timestampToTime(detailMsg.create_time*1000)}}</view>

			<view style="font-size: 3vw;color:#f0842a;margin-top: 2vw;">商品订单号:&nbsp;{{detailMsg.order_no}}</view>
			<view style="font-size: 3vw;color:royalblue;">支付宝订单号:&nbsp;{{detailMsg.order_num}}</view>
			<view style="font-size: 3vw;color:cadetblue;">支付状态:&nbsp;<span v-if="detailMsg.status==1">待支付</span><span
					v-else-if="detailMsg.status==2">已支付</span></view>
			<view style="font-size: 3vw;color:cadetblue;margin-top: 1.5vw;">商品数量:&nbsp;{{detailMsg.number}}</view>

			<!-- <view style="font-size: 4vw;">外观:&nbsp;{{detailText.外观}}</view> -->
			<!-- <view style="font-size: 4vw;">该物品具有StarTrak™技术，在其所有者装备是能跟踪若干统计数据。</view> -->
			<!-- <view style="font-size: 4vw;">该物品记录已认证杀敌数。</view> -->
		</view>
		<view class="else"></view>
		<view class="msg-two" style="height: 40vw;">
			<view style="font-weight: bold;font-size: 5vw;">商品详情</view>
			<view class="name" style="font-weight: bold;font-size: 4vw;">{{detailMsg.jewerly.name}}</view>
			<view class="seed" style="color: #8C92A4;font-size: 3vw;white-space: pre-wrap;">{{detailMsg.jewerly.detail}}
			</view>
			<!-- <view class="index" style="color: #8C92A4;font-size: 4vw;">皮肤编号（paint&nbsp;index）:&nbsp;911</view>
			<view class="wear" style="color: #8C92A4;margin-bottom: 2vw;font-size: 4vw;">磨损：
				<span v-if="detailMsg.wear_status==1">无磨损</span>
				<span v-if="detailMsg.wear_status==2">战痕累累</span>
				<span v-if="detailMsg.wear_status==3">破损不堪</span>
				<span v-if="detailMsg.wear_status==4">久经沙场</span>
				<span v-if="detailMsg.wear_status==5">略有磨损</span>
				<span v-if="detailMsg.wear_status==6">崭新出厂</span>
				<span v-if="detailMsg.wear_status==7">其他</span>
			</view> -->
		</view>


		<view class="" style="width: 100%;height: 2vh;background-color: #f4f5f7;">

		</view>
		<view class="msg-two">
			<view>收货地址</view>
			<view @click="steamde"
				style="width: 90vw; font-size: 4vw;color:#f0842a;border-top: 1px solid #ccc;border-bottom:1px solid #ccc;word-wrap: break-word;line-height: 9vw;margin-top: 5vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
				地址详情:&nbsp;{{detailMsg.user_steam_link}}1111111111111111111111111111111</view>
		</view>
		<view class="buy">
			<span v-if="detailMsg.is_send==1" style="font-size: 4vw;">等待支付</span>
			<span v-if="detailMsg.is_send==2" style="font-size: 4vw;">待发货</span>
			<span v-if="detailMsg.is_send==3" style="font-size: 4vw;">已发货</span>
			<view class="price" style="font-size: 5vw;">
				商品价格<span style="font-size: 5vw;margin-left: 3vw;">￥{{detailMsg.price}}</span>
			</view>
			<view v-if="detailMsg.is_send==1" class="buyBtn" @click="buy">购买</view>
		</view>

	</view>
</template>

<script>
	import wearProgressVue from '../../../components/wear-progress.vue'
	export default {
		data() {
			return {
				detailMsg: {},
				detailText: {},
				providerMsg: {}
			}
		},
		computed: {

		},
		components: {
			wearProgressVue
		},
		onLoad(options) {
			this.getDetail(options.data)


		},
		methods: {

			timestampToTime(timestamp) {
				let date = new Date(timestamp) // 时间戳为10位需*1000，13位不需*1000
				let yy = date.getFullYear()
				let mm = this.addZero(date.getMonth() + 1)
				let dd = this.addZero(date.getDate())
				let hh = this.addZero(date.getHours())
				let mf = this.addZero(date.getMinutes())
				let ss = this.addZero(date.getSeconds())
				return `${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`
			},

			addZero(str) {
				return str < 10 ? '0' + str : str
			},
			steamde() {
				uni.showModal({
					title: '设置默认Steam',
					content: '需要更改默认Steam吗',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/steam/steam"
							})

						} else {
							console.log('弹框后点取消')
						}
					}
				})
			},
			//详情页数据
			getDetail(id) {
				let data = {
					order_id: id
				}
				let token = uni.getStorageSync('token')
				uni.request({
					url: "/api/jewerly/order_info",
					method: "POST",
					data: data,
					header: {
						token: token
					}
				}).then(res => {
					if (res.data.code == 409 || res.data.code == 403 || res.data.code == 303) {
						uni.removeStorageSync("user")
						uni.removeStorageSync("token")
						uni.removeStorageSync("datausers")
						uni.showToast({
							icon: "none",
							title: "请重新登录",
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}, 1000)
						return
					}
					// console.log(res);
					this.detailMsg = res.data.data
					console.log(this.detailMsg.create_time)
					let detail = this.detailMsg.detail
					// 按行拆分字符串
					const lines = detail.split('\n');

					// 遍历每一行并将其转换成键值对
					lines.forEach(line => {
						// 按 "：" 拆分键和值
						const [key, value] = line.split('：');
						// 去除键和值中的多余空格并存储到对象中
						this.detailText[key.trim()] = value.trim();
					});
				});
			},

			back() {
				uni.navigateBack()
			},
			buy() {
				console.log(this.detailMsg.is_send)
				let detailMsg = JSON.stringify(this.detailMsg.jewerly)
				uni.navigateTo({
					url: `/pages/pay/pay?detailMsg=${detailMsg}`
				})
			}
		}
	}
</script>
<style type="text/css">
	@import url("@/static/icon/style.css");
</style>
<style lang="scss" scoped>
	.detail-page {
		width: 100vw;
		height: 92vh;
		background-color: white;
		overflow-y: scroll;

		.top {
			width: 100%;
			height: 25vh;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
			overflow: hidden;

			.navigation {
				width: 90%;
				margin: auto;
				height: 10vw;
				margin-top: 9vw;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.back {
					width: 7vw;
					height: 7vw;
					font-family: "icomoon";
					font-size: 6vw;
					color: white;
				}

				.back::before {
					content: "\e91d";
				}

				.tool {
					width: 10vw;
					display: flex;
					justify-content: space-between;

					.collection {
						width: 7vw;
						height: 7vw;
						font-family: "icomoon";
						font-size: 6vw;
						color: white;
						font-weight: bold;
					}

					.collection::before {
						content: "\e912";
					}

					.share {
						width: 7vw;
						height: 7vw;
						font-family: "icomoon";
						font-size: 6vw;
						color: white;
					}

					.share::before {
						content: "\e901";
					}
				}
			}

			.image {
				width: 100%;
				height: 20vh;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				margin-top: -7vw;
			}
		}

		.msg-one {
			width: 90%;
			height: 50vw;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			overflow: scroll;
		}

		.else {
			width: 100%;
			height: 2vh;
			background-color: #f4f5f7;
		}

		.msg-two {
			width: 90%;
			margin: auto;
			height: 40vh;


			view:nth-child(1) {
				font-size: 5vw;
				font-weight: bold;
				margin-top: 2vw;
			}

			view:nth-child(2) {
				color: #a7a7a7;
				margin-top: 2vw;
			}

			view:nth-child(3) {
				color: #a7a7a7;
				margin-top: 2vw;
			}

			view:nth-child(4) {
				color: #a7a7a7;
				margin-top: 2vw;
			}

			view:nth-child(5) {
				color: #a7a7a7;
				margin-top: 2vw;
			}

			view:nth-child(6) {
				color: #90c8ff;
				margin-top: 2vw;
			}

			view:nth-child(7) {
				color: #cd642a;
				// margin-top: 5vw;
			}
		}


		.buy {
			width: 100vw;
			height: 8vh;
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 2px solid #f4f5f7;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;

			.price {
				color: #b3b3b3;
				margin-left: 5vw;

				>span {
					font-weight: bold;
					color: #f69409;
				}
			}

			.buyBtn {
				width: 20vw;
				height: 10vw;
				background-color: #f69409;
				border-radius: 5px;
				text-align: center;
				line-height: 10vw;
				font-weight: bold;
				color: white;
				font-size: 4vw;
				margin-right: 5vw;
			}
		}
	}
</style>